<template>
	<view class="container">
		<!-- <button class="avatar-wrapper" style="border: none;" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<image class="avatar" :src="avatarUrl"></image>
		</button>
		<view class="nickname-box">
			<view class="label">
				昵称
			</view>
			<input type="nickname" class="nickname" placeholder="请输入昵称" maxlength="15" :value="nickName"
				@change="getNickname" />
		</view> -->
		<view class="bg">
			<NavigationBar backgroundColor="rgba(0,0,0,0)" :showIcon="false">
				<template #left></template>
				<template></template>
				<template #right></template>
			</NavigationBar>
		</view>
		<view class="header">
			<view class="row">
				<view class="num">
					0
				</view>
				<view class="text">
					谷子币
				</view>
			</view>
			<view class="row">
				关于充值问题如有疑问，请联系客服
			</view>
		</view>
		<scroll-view class="content">
			<view class="item" v-for="item in gearList" :key="item.id" @click="reCharge(item.id)">
				<view class="left">
					<image src="https://hr-api.lanbeiduo.com/api/file/download/Xvz3BnwwyT_金币.png" mode="" class="img">
					</image>
					<text class="num">{{item.amount}}</text>
					<text>谷子币</text>
				</view>
				<view class="right">
					<text>¥</text><text class="num">{{item.price/100}}</text>
				</view>
			</view>
			<!-- <view class="item">
				<view class="left">
					<image src="https://hr-api.lanbeiduo.com/api/file/download/Xvz3BnwwyT_金币.png" mode="" class="img">
					</image>
					<text class="num">100</text>
					<text>谷子币</text>
				</view>
				<view class="right">
					<text>¥</text><text class="num">10.00</text>
				</view>
			</view> -->
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, onMounted } from 'vue'
	import { $http, getAppId, toLogin } from "@/common"
	import NavigationBar from "@/components/NavigationBar/NavigationBar.vue"
	import {
		onInit,
		onLoad,
		onReady,
		onShow,
		onHide,
		onUnload,
		onResize,
	} from '@dcloudio/uni-app'
	const gearList = ref([])
	onLoad(() => {
		$http.get('userGear').then(res => {
			gearList.value = res
		})
	})
	onShow(() => {

	})
	function reCharge(id){
		$http.post('userRecharge',{gearIds:id}).then(result => {
			wx.requestPayment({
				timeStamp: result.pay.timeStamp,
				nonceStr: result.pay.nonceStr,
				package: result.pay.package,
				signType: result.pay.signType,
				paySign: result.pay.paySign,
				success(res) {
					console.log(res)
					if (res.errMsg == "requestPayment:ok") {
						uni.showToast({
							title: '支付成功'
						})
						console.log('支付成功', res)
						setTimeout(()=>{
							
						},500)
					} else {
						uni.showToast({
							title: '支付失败'
						})
						console.log('支付失败')
					}
				},
				fail(res) {
					uni.showToast({
						title: '支付失败'
					})
				}
			})
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-color: #F9F9F9;

		.bg {
			position: fixed;
			top: 0;
			width: 100%;
			height: 180px;
			//background-color: #87CEEB;
			background-color: #87CEFA
		}

		.header {
			color: #fff;
			position: fixed;
			top: 190rpx;
			padding-left: 20rpx;

			.row {
				display: flex;
				//font-size: 30rpx;

				.num {
					font-size: 40rpx;
				}

				.text {
					font-size: 30rpx;
					position: relative;
					top: 6rpx;
					left: 2rpx;
				}
			}
		}

		.content {
			position: fixed;
			width: 100%;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			background-color: #fff;
			height: calc(100vh - 300rpx);
			margin-top: 300rpx;
			padding: 30rpx 20rpx;

			.item {
				background: linear-gradient(to bottom, #12B7F5, #DDEAFC);
				padding: 40rpx 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #fff;
				margin-bottom: 16rpx;
				border-radius: 14rpx;
				color: #FFF;

				.left {
					display: flex;
					align-items: center;

					.img {
						width: 45rpx;
						height: 40rpx;
					}

					.num {
						font-size: 42rpx;
						margin: 0 4rpx 0 6rpx;
					}
				}

				.right {
					text {
						font-size: 30rpx;
					}
				}
			}
		}
	}
</style>